
<template>
  <div>
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
             :collapse="isCollapse">
      <el-menu-item v-for="item in noChildrenMenu" :key="item.name" v-bind:index="item.name">
        <!-- 这里使用了es6字符串的拼接       -->
        <i v-bind:class="`el-icon-${item.icon}`" ></i>
        <span slot="title">{{item.label}}</span>
      </el-menu-item>


      <el-submenu  v-for="item in hasChildrenMenu" :key="item.label"   :index="item.label">
        <template slot="title">
          <i :class="`el-icon-${item.icon}`"></i>
          <span slot="title">{{item.label}}</span>
        </template>
        <el-menu-item-group v-for="subItem in item.children" :key="subItem.path" >
          <el-menu-item :index="subItem.path">
            <i :class="`el-icon-${subItem.icon}`"></i>
            <span slot="title">{{subItem.label}}</span>
          </el-menu-item>
        </el-menu-item-group>


<!--        <el-menu-item  v-for="childItem in item.children" :key="childItem.name" :index="childItem.name">
          <span slot="title">{{childItem.label}}</span>
          <i v-bind:class="`el-icon-${childItem.icon}`" ></i>
        </el-menu-item>-->
      </el-submenu>
    </el-menu>


  </div>

</template>


<script >
export  default {
  data(){
    return {

      isCollapse: false,
      menuData: [
        {
          path : '/',
          name: 'home',
          label: '首页',
          icon: 's-home',
          url: 'Home/Home'
        },
        {
          path : '/mall',
          name: 'mall',
          label: '商品管理',
          icon: 'video-play',
          url: 'MallManage/MallManage'
        },
        {
          path : '/user',
          name: 'user',
          label: '用户管理',
          icon: 'user',
          url: 'UserManage/UserManage'
        },{
          label: '其他',
          icon: 'location',
          children:[
            {
              path : '/page1',
              name: 'page1',
              label: '页面1',
              icon: 'setting',
              url: 'Other/PageOne'
            },
            {
              path : '/page2',
              name: 'page2',
              label: '页面2',
              icon: 'setting',
              url: 'Other/PageTow'
            }
          ]
        },

      ]


    }

  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  // 计算数据
  computed:{
    // 没有子菜单
    noChildrenMenu(){
      return this.menuData.filter(item => !item.children);
    },

    // 有子菜单
    hasChildrenMenu(){
      return this.menuData.filter(item => item.children);
    }
  }

}

</script>



<style >

</style>
